<template>
  <div id="openidUserRelation">
    <h1 class="con-right-title">
      OpenID-AB用户关联导入
    </h1>
    <!-- 搜索 -->
    <top-search @toSearch="toSearch"></top-search>
    <!-- 按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" @click="importBtn">批量导入</el-button>
      <el-button type="warning" @click="mumanualImport">手动导入</el-button>
      <el-button type="warning" @click="exportFile">导出</el-button>
      <el-button type="warning" @click="importDetail">批量导入详情</el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="编号" type="index" width="120" align="center">
      </el-table-column>
      <el-table-column
        label="A的OpenID"
        prop="openIdA"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="A的手机号"
        prop="phoneA"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="A参加活动时间"
        prop="createTimeA"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="B的OpenID"
        prop="openIdB"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="B的手机号"
        prop="phoneB"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="B的学院" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.collegeName || '——' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B参加活动时间"
        prop="createTimeB"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="关系创建时间"
        prop="createTime"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="AB关系"
        prop="zcStatus"
        min-width="100"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>
            {{ row.zcStatus | filterName('openid_relation_status') }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 导入弹窗 -->
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="handleRefresh"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      :from="''"
    ></errorDialog>
    <!-- 手动导入 -->
    <manualImportDialog
      v-if="manualImportDialogData.isShow"
      :dialog-data="manualImportDialogData"
      @handleRefresh="handleRefresh"
    ></manualImportDialog>
    <!-- 导入成功 -->
    <importSuccessDialog
      v-if="importSuccessDialogData.isShow"
      :dialogData="importSuccessDialogData"
    ></importSuccessDialog>
  </div>
</template>

<script>
import topSearch from './topSearch'
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗
import manualImportDialog from './manualImportDialog'
import importSuccessDialog from './importSuccessDialog'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  openidUserRelationList,
  downUrl,
  importOpenIds
} from '@/api/openIdRelationAB/openidUserRelation'
export default {
  components: {
    topSearch,
    importDialog,
    errorDialog,
    manualImportDialog,
    importSuccessDialog
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: 'OpenID-AB用户关联导入',
        url: '',
        downUrl: '',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      //手动导入弹窗
      manualImportDialogData: {
        isShow: false
      },
      //导入成功
      importSuccessDialogData: {
        isShow: false
      }
    }
  },
  async mounted() {
    this.searchList()
    await sysNormalDisable('openid_relation_status', 'openid_relation_status')
  },
  methods: {
    searchList() {
      openidUserRelationList(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    // 导入
    importBtn() {
      this.importDialogData.url = importOpenIds() // 导入接口
      this.importDialogData.downUrl = downUrl() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text
    },
    /* 手动导入 */
    mumanualImport() {
      this.manualImportDialogData.isShow = true
    },
    /* 导入详情 */
    importDetail() {
      this.importSuccessDialogData.isShow = true
    },
    /* 成功后刷新列表 */
    handleRefresh(callbBack) {
      callbBack()
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 导出 */
    exportFile() {
      this.$confirm('确定导出OpenID-AB用户关联表吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let params = Object.assign({}, this.searchParams)
          let url = '/openid-user-relation/export'
          this.downFile('get', url, params, 'OpenID-AB用户关联')
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped></style>
